<template>
  <a-form-model
    :ref="'comorbidity' + confirmType"
    :model="comorbidity"
    :label-col="formItemLayout.labelCol"
    :wrapper-col="formItemLayout.wrapperCol"
    labelAlign="left"
  >
    <a-form-model-item label="确诊情况">
      <a-radio-group v-model="comorbidity.cerebrovascular">
        <a-radio :value="1"> 确诊有 </a-radio>
        <a-radio :value="2"> 确诊无 </a-radio>
        <a-radio :value="3"> 未确诊 </a-radio>
      </a-radio-group>
    </a-form-model-item>
    <div class="content" v-show="comorbidity.cerebrovascular === 1">
      <a-divider />
      <a-form-model-item label="脑卒中">
        <j-dict-select-tag v-model="comorbidity.strokeType" dictCode="pubDossierStrokeType" type="radio" />
        <a-input v-show="comorbidity.strokeType == 3" v-model="comorbidity.strokeOther" />
      </a-form-model-item>

      <a-form-model-item label="脑卒中-确诊日期">
        <a-date-picker
          :disabled-date="disabledDate"
          v-model="comorbidity.strokeDate"
          @change="onChange1"
          :style="{ width: '200px' }"
        />
      </a-form-model-item>

      <a-form-model-item label="急性脑缺血">
        <a-date-picker
          :disabled-date="disabledDate"
          v-model="comorbidity.ischemiaDate"
          @change="onChange2"
          :style="{ width: '200px' }"
        />
      </a-form-model-item>

      <a-form-model-item label="短暂性脑缺血发作">
        <a-date-picker
          :disabled-date="disabledDate"
          v-model="comorbidity.transientIschemiaDate"
          @change="onChange3"
          :style="{ width: '200px' }"
        />
      </a-form-model-item>

      <a-form-model-item label="动脉粥样硬化性CCVD">
        <a-date-picker
          :disabled-date="disabledDate"
          v-model="comorbidity.ccvdDate"
          @change="onChange4"
          :style="{ width: '200px' }"
        />
      </a-form-model-item>

      <a-form-model-item label="其他">
        <a-input
          placeholder="请输入在300字以内"
          v-model="comorbidity.cerebrovascularOther"
          :style="{ width: '660px', height: '100px' }"
          type="textarea"
          :maxLength="300"
        />
        <div
          v-if="comorbidity.cerebrovascularOther != null && comorbidity.cerebrovascularOther.length > 0"
          :style="{ display: 'inline-block', marginLeft: '1rem' }"
        >
          {{ comorbidity.cerebrovascularOther.length }}/300
        </div>
      </a-form-model-item>

      <a-form-model-item label="相关检查">
        <a-input
          placeholder="请输入在300字以内"
          v-model="comorbidity.cerebrovascularCheck"
          :style="{ width: '660px', height: '100px' }"
          type="textarea"
          :maxLength="300"
        />
        <div
          v-if="comorbidity.cerebrovascularCheck != null && comorbidity.cerebrovascularCheck.length > 0"
          :style="{ display: 'inline-block', marginLeft: '1rem' }"
        >
          {{ comorbidity.cerebrovascularCheck.length }}/300
        </div>
      </a-form-model-item>
    </div>
    <a-form-model-item :wrapper-col="{ span: 12, offset: 10 }">
      <a-button type="primary" @click="save" :loading="saveLoading">保存</a-button>
      <a-popconfirm placement="topLeft" ok-text="是" cancel-text="否" @confirm="confirm">
        <template slot="title">
          <p>此操作代表你已完成了页面的填写，是否继续？</p>
        </template>
        <a-button type="primary" style="margin-left: 30px" :loading="saveLoading">确认完成</a-button>
      </a-popconfirm>
    </a-form-model-item>
  </a-form-model>
</template>

<script>
import moment from 'moment'

export default {
  name: 'Cerebrovascular',
  props: ['comorbidity'],
  data() {
    return {
      confirmType: 4,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      },
      saveLoading: false
    }
  },
  methods: {
    onChange1(date, dateString) {
      console.log(date, dateString)
      this.comorbidity.strokeDate = this.comorbidity.strokeDate.format('YYYY-MM-DD hh:mm:ss')
      console.log(this.comorbidity.strokeDate)
    },
    onChange2(date, dateString) {
      console.log(date, dateString)
      this.comorbidity.ischemiaDate = this.comorbidity.ischemiaDate.format('YYYY-MM-DD hh:mm:ss')
      console.log(this.comorbidity.ischemiaDate)
    },
    onChange3(date, dateString) {
      console.log(date, dateString)
      this.comorbidity.transientIschemiaDate = this.comorbidity.transientIschemiaDate.format('YYYY-MM-DD hh:mm:ss')
      console.log(this.comorbidity.transientIschemiaDate)
    },
    onChange4(date, dateString) {
      console.log(date, dateString)
      this.comorbidity.ccvdDate = this.comorbidity.ccvdDate.format('YYYY-MM-DD hh:mm:ss')
      console.log(this.comorbidity.ccvdDate)
    },
    disabledDate(current) {
      // Can not select days before today and today
      return current > moment().endOf('day')
    },
    save() {
      this.saveLoading = true
      this.$emit('save', this.confirmType)
    },
    confirm() {
      this.saveLoading = true
      this.$emit('confirm', this.confirmType)
    }
  }
}
</script>

<style lang="less" scoped></style>
